<template>
	<view class="container">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">记录详情</block>
		</cu-custom>
		<view class="MainBox">
			
			<view class="cssBox">
				<view class="text-df lf margin-top-sm">负责单位：{{recordInfo.orgName}}</view>
				<view class="text-df lf margin-top-sm">负 责 人：{{recordInfo.principalName}}</view>
				<view class="text-df margin-top-sm">联系电话：{{recordInfo.mobile}}</view>
				<view class="text-df margin-top-sm">租借时间：{{recordInfo.time}}</view>
				<view class="text-df margin-top-sm">租借日期：{{recordInfo.startTime}} - {{recordInfo.endTime}}</view>
				<view class="text-df margin-top-sm">参加人数：{{recordInfo.num}}</view>
			</view>

			<view class="cssBox">
				<view class="margin-bottom-sm">
					<text class=" text-lg">申请目的：</text>
				</view>
				<text class="text-df">{{recordInfo.remark}}</text>
			</view>
			
			
			<view class="cssBox" v-if="recordInfo.message">
				<view class="margin-bottom-sm">
					<text class=" text-lg">拒绝理由：</text>
				</view>
				<text class="text-df">{{recordInfo.message}}</text>
			</view>
			
			<block v-if="recordInfo.status=='0' && userInfo.loginType=='1'">
				
			</block>
			
			<block v-else>
			
			<view class="cssBox" v-if="!recordInfo.classroomId || userInfo.loginType=='0' && recordInfo.status=='0'">
				<view class="margin-bottom-sm flex justify-between">
					<text class="text-bold text-lg">教室：</text>
					<!-- <text class="text-gray text-df">共5节课/当前播放：第2节</text> -->
				</view>
				<view class="courseBox flex justify-around">
					<view v-for="(item,index) in classroomList" :class="tabIndex==index?'active':''" @click="changeClassroom(item,index)">
						<text>
							<!-- <u-icon size="16" name="https://www.tupians.top/imgs/2021/12/f149021fb9f5c619.png"></u-icon> -->
							{{item.name}}
						</text>
					</view>
				</view>
				<!-- <u-button @click="submit">分配</u-button> -->
				<view class="margin-top flex justify-around" v-if="recordInfo.status=='0' && userInfo.loginType=='0'">
					<u-button type="primary" shape="circle" style="width: 300rpx;" @click="submite">分配</u-button>
					<u-button type="error" shape="circle" style="width: 300rpx;" @click="open">拒绝</u-button>
				</view>
			</view>
			
			<view class="cssBox" v-if="recordInfo.classroomId && recordInfo.status=='1'">
				<view class="margin-bottom-sm flex justify-between">
					<text class="text-bold text-lg">教室：</text>
					<!-- <text class="text-gray text-df">共5节课/当前播放：第2节</text> -->
				</view>
				<view class="courseBox flex justify-around">
					<view class="active">
						<text>
							<!-- <u-icon size="16" name="https://www.tupians.top/imgs/2021/12/f149021fb9f5c619.png"></u-icon> -->
							{{recordInfo.classroomName}}
						</text>
					</view>
				</view>
				<!-- <u-button @click="submit">分配</u-button> -->
				<view class="margin-top" v-if="recordInfo.status=='0'">
					<u-button type="primary" shape="circle" @click="submite">分配</u-button>
				</view>
			</view>
			</block>
		</view>
		
		<u-modal v-model="show" :title-style="{color: 'blue'}" @confirm="usubmite">
			<view class="slot-content">
				<u-input v-model="remark" type="textarea" :border="true"  />
			</view>
		</u-modal>
	</view>

		
	</view>
</template>

<script>
	import {getRecordById,getListByFloorList,putApply} from '@/api/main.js'
	export default {
		components: {

		},
		data() {
			return {
				remark:'',
				show: false,
				tabIndex:0,
				userInfo:{},
				id:'',
				videoUrl: 'x3032spkh1m',
				recordInfo:{},
				getData:[
					{
						title: 'uniapp开发',
						studyNum: '335',
						review: '35',
						time: '2020-12-11',
						synopsis: 'uni-app是一个使用Vue.js开发跨平台个人文库应用的前端框架,开发者编写一套代码,可编译到的iOS,安卓,H5,小程序等多个平台。',
						item: [
							{
								title: "第一课",
								name: "初识uniapp",
								vidUrl: 'x3032spkh1m'
							}
						]
					}
				],
				classroomList:[]
			}
		},
		onLoad(op) {
			console.log(op)
			this.id = op.id
		},
		onShow() {
			this.loadInfo()
			this.loadUserInfo()
		},
		methods: {
			open() {
							this.show = true;
						},
			changeClassroom(item,index){
				if(this.recordInfo.status=='1'){
					return;
				}
				this.tabIndex = index
			},
			submite(){
				let classroomId = this.classroomList[this.tabIndex].id
				let data = {
					id : this.id,
					classroomId : classroomId,
					status:"1"
				}
				putApply(data).then(res=>{
					console.log(res)
					this.$u.toast('分配教室成功')
					that.$Router.back(1)
					
				})
			},
			usubmite(){
				let data = {
					id : this.id,
					status:"2",
					message:this.remark
				}
				putApply(data).then(res=>{
					console.log(res)
					this.$u.toast('操作成功')
					that.$Router.back(1)
					
				})
			},
			loadUserInfo(){
				let that  = this
				this.$http.get("/auth/userinfo",{params:{id:this.$store.getters.userid}}).then(res=> {
					if (res.data.success) {
						let result = res.data.result
						console.log("用户",result)
						that.userInfo = result
					}
				}).catch(e=>{
					console.log("请求错误",e)
				})
			},
			loadInfo(){
				let data = {
					id : this.id
				}
				getRecordById(data).then(res=>{
					console.log(res.data.result)
					this.recordInfo = res.data.result
				})
				
				getListByFloorList(data).then(res=>{
					console.log(res.data.result)
					this.classroomList = res.data.result
				})
				
			},
			
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-content {
			font-size: 28rpx;
			color: $u-content-color;
			padding: 30rpx;
		}
	page {
		background-color: #f2f5f9;
	}

	.MainBox {
		width: 750rpx;

		video {
			width: 750rpx;
		}
	}

	.cssBox {
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 15rpx;
	}
	.rightBox{
		width: 150rpx;
		height: 100%;
		position: absolute;
		right: 20rpx;
		top: 0;
		text-align: center;
		line-height: 120rpx;
		padding: 0;
		background: none;
	}

	.list_title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
	}

	.list_content {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-break: break-all;
		font-size: 28rpx;
		color: #888;
	}
	
	.courseBox{
		    display: flex;
		    flex-wrap: wrap;
		    justify-content: space-between;
			margin-left: -10px;
		view{
			width: 240rpx;
			height: 58rpx;
			border: 2rpx solid #909399;
			text-align: center;
			line-height: 58rpx;
			-webkit-border-radius: 6px;
			border-radius: 12rpx;
			margin:10rpx 0 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			word-break: break-all;
			font-size: 24rpx;
			color: #909399;
			padding: 0 6rpx;
		}
		.active{
			border: 2rpx solid #2979ff;
			background-color: #2979ff;
			color: #FFFFFF;
		}
	}
	.courseBox::after {
	    content: "";
		flex: auto; 
	}
	.courseBox>view {
		margin-left: 10px;
		margin-bottom: 10px;
		width: -webkit-calc((100% - 10px*3)/ 3);
		width: calc((100% - 10px*3)/ 3);
	}
	button::after {
		border: none;
		padding: 0;
	}
</style>
